<template>
  <m-divider>
    <div class="plan-item">
      <p class="time">{{item.trainingDuration}}分钟</p>
      <router-link :to="{
          path: `/program/plan/details?id=${item.id}`}">
          <p class="title big">{{item.trainingName}}</p>
      </router-link>
      <p class="info weak">
        <text-omit :text="item.trainingAim" nax="60" />
      </p>
      <div class="imgList">
        <m-flexbox wrap="wrap" :gutter="18">
          <m-flexbox-item :span="5" v-for="(img, i) in item.imageUrls" :key="i" >
            <img :src="img">
          </m-flexbox-item>
        </m-flexbox>
      </div>
    </div>
  </m-divider>
</template>

<script>
import TextOmit from '@/views/components/TextOmit'
export default {
  components: {
    TextOmit
  },
  props: {
    item: {
      type: Object
    }
  }
}
</script>

<style lang="scss" scoped>
  .plan-item{
    padding-left: .3rem;
    padding-right: .24rem;
    padding-bottom: .4rem;
    position: relative;
    &::before{
      content: '';
      background: $color-primary;
      position: absolute;
      left: .3rem;
      top: .2rem;
      transform: translateY(-50%);
      height: .06rem;
      width: .06rem;
      display: block;
      border-radius: 50%;
    }
    &::after{
      content: '';
      position: absolute;
      width: .03rem;
      top: .4rem;
      bottom: .4rem;
      left: .32rem;
      display: block;
      background: $border-color-base;
    }
    p{
      padding-left: .2rem;
      margin: .2rem 0;
      &.time{
        color: $color-primary;
      }
    }
    .imgList{
      padding-left: .52rem;
      padding-right: .34rem;
      text-align: center;
      img{
        width: 2.86rem;
        height: 1.54rem;
      }
    }
  }
</style>
